.a-button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  cursor: pointer;

  .a-button__label {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    user-select: none;
  }
  // Icons
  .a-button__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: rem(16);

    &--right {
      order: 2;
    }

    &--fonts-icon {
      width: rem(24);
      height: rem(24);
    }
  }

  // Size
  &--xlarge {
    height: rem(56);
    & .a-button__label {
      padding-right: rem(32);
      padding-left: rem(32);
    }
    & .a-button__icon--left {
      margin-left: rem(32);
    }
    & .a-button__icon--right {
      margin-right: rem(32);
    }
    &.a-button--rounded {
      width: rem(56);
      height: rem(56);
      border-radius: rem(56);
    }
    &.a-button--square {
      width: rem(56);
      height: rem(56);
    }
  }
  &--large {
    height: rem(48);
    & .a-button__label {
      padding-right: rem(32);
      padding-left: rem(32);
    }

    & .a-button__icon--left {
      margin-left: rem(32);
    }

    & .a-button__icon--right {
      margin-right: rem(32);
    }
    &.a-button--rounded {
      width: rem(48);
      height: rem(48);
      border-radius: rem(48);
    }
    &.a-button--square {
      width: rem(48);
      height: rem(48);
    }
  }

  &--medium {
    height: rem(40);
    & .a-button__label {
      padding-right: rem(24);
      padding-left: rem(24);
    }

    & .a-button__icon--left {
      margin-left: rem(24);
    }

    & .a-button__icon--right {
      margin-right: rem(24);
    }
    &.a-button--rounded {
      width: rem(40);
      height: rem(40);
      border-radius: rem(40);
    }
    &.a-button--square {
      width: rem(40);
      height: rem(40);
    }
  }
  &--small {
    height: rem(32);
    & .a-button__label {
      padding-right: rem(20);
      padding-left: rem(20);
    }

    & .a-button__icon--left {
      margin-left: rem(20);
    }

    & .a-button__icon--right {
      margin-right: rem(20);
    }
    &.a-button--rounded {
      width: rem(32);
      height: rem(32);
      border-radius: rem(32);
    }
    &.a-button--square {
      width: rem(32);
      height: rem(32);
    }
  }

  // Color
  &--color-accent {
    color: var(--a-bgAccent);
  }
  &--color-primary {
    color: var(--a-color_text);
  }

  // bgColor & condition
  &--accent {
    color: var(--a-mainText);
    background-color: var(--a-bgAccentLight);
    &.hover,
    &:hover {
      color: var(--a-white);
      background-color: var(--a-bgAccent);
    }
    &.active,
    &:active {
      background-color: var(--a-mainAccent);
    }
    &.disabled,
    &:disabled {
      background-color: var(--a-mainAccent);
      cursor: auto;
    }
  }
  &--primary {
    color: var(--a-baseLight);
    background-color: var(--colorBgBlackMTI);
    &.hover,
    &:hover {
      background-color: var(--colorBgBlackMTI);
    }
    &.active,
    &:active {
      background-color: var(--colorBgBlackMTI);
    }
    &.disabled,
    &:disabled {
      background-color: var(--a-baseLight);
      cursor: auto;
    }
  }
  &--secondary {
    color: var(--a-baseLight);
    background-color: var(--a-mainAccent);
    &.hover,
    &:hover {
      color: var(--a-baseLight);
      background-color: var(--a-mainSecond);
    }
    &.active,
    &:active {
      background-color: var(--a-mainAccent);
    }
    &.disabled,
    &:disabled {
      color: var(--a-color_bg);
      background-color: var(--a-mainAccent);
      cursor: auto;
    }
  }
  &--custom {
    color: var(--a-baseLight);
    background-color: var(--a-baseDark);
  }

  &--ghost {
    box-sizing: border-box;
    color: var(--a-lightText);
    background-color: transparent;
    &.hover,
    &:hover {
      color: var(--a-lightText);
    }
  }

  &--ghost-accept {
    color: var(--colorBgBlackMTI);
    background-color: var(--a-baseLight);
    border: rem(1) solid var(--a-mainAccent);

    &.hover,
    &:hover {
      border: rem(1) solid var(--a-mainSecond);
    }
    &.active,
    &:active {
      border: rem(1) solid var(--a-mainAccent);
    }
    &.disabled,
    &:disabled {
      border: rem(1) solid var(--a-borderColor);
    }
  }
  &--ghost-primary {
    box-sizing: border-box;
    color: var(--a-baseDark);
    background-color: var(--a-baseLight);
    border: rem(1) solid var(--a-borderColor);
    &:disabled {
      color: var(--a-mainLightGray);
      border: rem(1) solid var(--a-borderColor);
      cursor: auto;
    }
  }
  &--none {
    color: var(--a-baseDark);
    background-color: transparent;
    &.hover,
    &:hover {
      color: var(--a-mainSecond);
    }
    &:disabled {
      color: var(--a-textDarkGray);
      cursor: auto;
    }
  }
  // OnlyIcon
  &--rounded .a-button__label {
    display: none;
  }
  &--square .a-button__label {
    display: none;
  }
}
